import React, {Component} from 'react';
import {Layout, Button, Avatar, Dropdown, Menu, Icon} from 'antd';
import {withRouter} from 'react-router-dom';
import styles from './LayoutHeader.less';
import Cookies from 'js-cookie';
import { axios } from 'utils';

const {Header} = Layout;


class LayoutHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleClick = () => {
        const {history} = this.props;
        axios({
            url: '/hs/admin/auth/loginOut',
            method: 'post'
        }).then((res) => {
            if (res) {
                // Cookies.remove('isLogin');
                history.push('/login')
            }
        });
    }

    menu = (
        <Menu>
            <Menu.Item>
                <div className={styles.itemInfo}>
                    <Icon type={'user'}/>
                    <span>个人中心</span>
                </div>

            </Menu.Item>
            <Menu.Item>
                <div className={styles.itemInfo}>
                    <Icon type={'setting'}/>
                    <span>设置</span>
                </div>
            </Menu.Item>
            <Menu.Item>
                <div onClick={this.handleClick} className={styles.itemInfo}>
                    <Icon type={'logout'}/>
                    <span>退出登录</span>
                </div>
            </Menu.Item>
        </Menu>
    );

    render() {
        return (
            <Header className={styles.headerWrapper}>
                <div className={styles.logo}>
                    后台管理系统
                </div>
                <Dropdown overlay={this.menu}>
                    <div className={styles.btnWrapper}>
                        <Avatar size={'small'} className={styles.avatar} icon="user"/>
                        <span className={styles.userInfo}>admin</span>
                    </div>
                </Dropdown>
            </Header>
        );
    }

}

export default withRouter(LayoutHeader);
